• HTML
  • CSS
  • JS

    Temas HTML

  • Estructura

  • Texto

  • Etiquetas Generales

  • Listas

  • Metadatos

  • Multimedia

  • Tablas

  • Eventos

  • Formularios

  • Validaciones

  • Envío de Datos

  • Controladores JS

  • Pre-Carga

  • Recordatorios

Representar código de forma correcta

En ocasiones pudiese ser necesario representar algún código para el usuario, pero al tratarse de símbolos interpretados por el navegador no es posible incorporarlos sin más en el texto, para esto se utilizan diversos métodos que serán desglosados a continuación:

Inclusión de caracteres especiales en HTML (Entidades)

Algunos símbolos forman parte de la sintaxis del código HTML, estos son llamados caracteres especiales o entidades, por ello para hacer posible su integración a un texto, si se diese el caso, se crearon unos valores referenciales que al ser interpretados por el navegador arrojan como resultado dichos símbolos especiales.

En este enlace se muestra una lista completa con todas las entidades usables en HTML, la mayoría no será necesario emplearlas ya que con la configuración UTF-8 implementada en la página los navegadores pueden interpretarlos casi todos.

Representar código informático de forma correcta

Para estos casos se utilizan las siguientes etiquetas:

  • code: Esta etiqueta se utiliza para mostrar literalmente el código que esta etiqueta encapsule, en otras palabras cualquier código que se escriba dentro de esta etiqueta no será interpretado por el navegador, sino que a su vez será mostrado al usuario.

  • pre: Por defecto el navegador no tiene en cuenta los espacios en blanco extra que se ingresen en el código, sin embargo justo ese es el efecto de esta etiqueta, en el texto que se ingrese en el interior de esta el navegador plasmará toda la estructura, incluyendo saltos de línea y tab entre otros.

  • kbd: Esta etiqueta muestra al texto dentro de esta con una fuente que se reserva particularmente para representar entradas de datos en el teclado o en el navegador (comandos de teclas).

  • samp: Esta etiqueta muestra al texto dentro de esta con una fuente que se reserva particularmente para representar salidas de datos de un programa del navegador.

A continuación se muestran los ejemplos de uso de estas etiquetas:

Código:

Visualización:

Contacto

¿Quién soy?

Mi nombre es Carlos Miguel Puche Moreno, estoy estudiando programación web de forma autodidacta, si quieres saber más visita mi perfil de GitHub haciendo clic en mi fotografía, o visita mis redes sociales:

Redes

Curriculum